<template>
  <d2-container class="page">
    <el-card>
      <span>菜单管理</span>
      <!--        <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
      <el-button type="text" icon="el-icon-plus" style="float: right;margin-right: 50px" @click="openChildModal()">添加
      </el-button>
    </el-card>
    <el-card style="margin-top: 5px;">
      <el-row :gutter="24">
        <el-col :span="6">
          <el-card>
            <menus :menus="menuTree" :pitchOn="pitchOn"/>
          </el-card>
        </el-col>
        <el-col :span="18">
          <el-card>
            <el-table :data="list" style="width: 100%" v-loading="loading">
              <el-table-column prop="sort" label="序号" align="center"></el-table-column>
              <el-table-column  label="图标" align="center">
                <template slot-scope="scope">
                  <d2-icon :name="scope.row.icon"/>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="名称" align="center"></el-table-column>
              <el-table-column label="类型" align="center">
                <template slot-scope="scope">
                  <el-tag size="small" v-if="scope.row.type===0">菜单</el-tag>
                  <el-tag size="small" type="warning" v-if="scope.row.type===1">资源</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="路径/标识" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.type===0">{{scope.row.path}}</span>
                  <span v-if="scope.row.type===1">{{scope.row.permissions}}</span>
                </template>
              </el-table-column>
              <el-table-column label="路由/接口" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.type===0">{{scope.row.router}}</span>
                  <span v-if="scope.row.type===1">{{scope.row.url}}</span>
                </template>
              </el-table-column>
              <el-table-column label="是否启用" align="center">
                <template slot-scope="scope">
                  <el-tag size="small" type="danger" v-if="scope.row.state===0">禁用</el-tag>
                  <el-tag size="small" type="success" v-if="scope.row.state===1">启用</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="createName" label="创建人" align="center"></el-table-column>
              <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
              <el-table-column fixed="right" label="操作" width="120" align="center">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
                  <el-button type="text" style="color: #ff2222" size="small" @click="delMenu(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
      </el-row>
      <paging :page="page" :currentChange="currentChange" :sizeChange="sizeChange"/>
    </el-card>
    <modal ref="modal" :menus="menus" :menuTree="menuTree" :initList="initList"/>
  </d2-container>
</template>

<script>
// eslint-disable-next-line camelcase
import menus from '@/views/components/menu'
import paging from '@/views/components/paging'
import { menuPage, menuList, deleteMenu } from '@/api/system/menu'
import modal from './modal'
import util from '@/libs/util'

export default {
  components: {
    modal, paging, menus
  },
  data () {
    return {
      list: [],
      menus: [],
      menuTree: [],
      loading: false,
      formParam: { pid: '' },
      page: {
        size: 10,
        total: 0,
        current: 1
      }
    }
  },
  created () {
    this.initTree()
    this.initList()
  },
  methods: {
    initList () {
      this.loading = true
      menuPage({ ...this.formParam, ...this.page }).then(e => {
        if (e && e.records) {
          this.list = e.records
          this.page = {
            current: parseInt(e.current),
            size: parseInt(e.size),
            total: parseInt(e.total)
          }
          this.loading = false
        }
      }).catch(e => {
        this.loading = false
      })
    },
    initTree () {
      menuList().then(res => {
        if (res) {
          const tree = util.tree(res, 'pid', 'children')
          this.menuTree = [{ id: '0', name: '顶栏', children: tree }]
          this.menus = [{ id: '0', name: '顶栏' }, ...res]
        }
      })
    },
    sizeChange (count) {
      this.page.size = count
      this.initList()
    },
    currentChange (count) {
      this.page.current = count
      this.initList()
    },
    handleEdit (row) {
      this.openChildModal(row)
    },
    openChildModal (param) {
      this.$refs.modal.openModal(param)
    },
    menuOpen () {

    },
    menuClose () {

    },
    pitchOn: function (id) {
      if (util.eq(id, '0')) {
        this.formParam.pid = ''
      } else {
        this.formParam.pid = id
        this.$refs.modal.param.pid = id
      }
      this.initList()
    },
    delMenu (row) {
      const title = (row.type === 0 && '菜单') || '资源'
      util.openDel(this, { id: row.id }, `${title}-${row.name}`, deleteMenu, this.initList)
    }

  }

}
</script>

<style scoped>

</style>
